<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>隔行变色</title>
    <style>
      div {
        font-size: 14px;
        color: white;
        line-height: 30px;
        margin-bottom: 5px;
      }
      .odd {
        background-color: lightblue;
        padding-left: 5px;
      }
      .even {
        background-color: lightpink;
        padding-left: 5px;
      }
    </style>
  </head>
  <body>
    <h1>名言大全</h1>
    <!-- 容器 -->
    <div id="container"></div>
    <script src="./lib/jquery.js"></script>
    <!-- 1. 引入模板引擎 -->
    <script src="./lib/template-web.js"></script>
    <!-- 3. 定义模板 -->
    <script type="text/html" id="star">
      <div>
        {{each array}} {{if $index % 2 === 0}}
        <div class="even">{{$value}}</div>
        {{else if $index % 2 !== 0}}
        <div class="odd">{{$value}}</div>
        {{/if}} {{/each}}
      </div>
    </script>
    <script>
      // 2. 定义好数据
      let data = {
        array: [
          "知人者智，自知者明。胜人者有力，自胜者强",
          "一个人即使已登上顶峰，也仍要自强不息",
          "要掌握书，莫被书掌握；要为生而读，莫为读而生",
          "业精于勤，荒于嬉；行成于思，毁于随",
          "只要持续地努力，不懈地奋斗，就没有征服不了的东西",
          "既然我已经踏上这条道路，那么，任何东西都不应妨碍我沿着这条路走下去",
          "滴 滴滴~",
        ],
      };
      // 4. 调用 template() 函数，获取到模板引擎拼接好的HTML字符串，渲染到 container 容器里面
      var htmlts = template("star", data);
      $("#container").html(htmlts);
    </script>
  </body>
</html>
